<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import { formatAddress, fromWei } from '@/utils/format';
import { getUSDTRecordList } from "@/api"

export default defineComponent({
    setup() {
        const open = ref(false);
        const setat = reactive({
            pageNum: 0,
            pageSize: 20,
            status: ""
        });
        const statusList = ref(["all", "topUp", "WithdrawCoins", "transferIn", "transferOut", "reserve", "PayTheBalance", "MakeAnAppointmentAgain", "income", "TeamAward", "ManagementAward", "LevelAward"])
        const refreshing = ref(false);
        const loading = ref(false);
        const finished = ref(true);
        const list = ref([]);
        const sstatusPay = ref([2, 3, 5])
        const onRefresh = () => {
            open.value = true;
            setat.pageNum = 0;
            finished.value = false;
            loading.value = true;
            refreshing.value = true
            onLoad();
        };
        const onLoad = async () => {
            const res = await getUSDTRecordList(setat);
            if (refreshing.value) {
                list.value = [];
                refreshing.value = false;
            }
            list.value = list.value.concat(res.data.data.InvestList || []);
            loading.value = false;
            setat.pageNum++;
            if (list.value.length >= res.data.data.Total) {
                finished.value = true;
            }
        };
        const sendNav = (index: any) => {
            if (index) {
                setat.status = index
            } else {
                setat.status = ""
            }
            onRefresh()
        }
        return {
            open,
            list,
            setat,
            refreshing,
            loading,
            finished,
            statusList,
            onRefresh,
            onLoad,
            formatAddress,
            fromWei,
            sendNav,
            sstatusPay
        };
    },
});
</script>
<template>
    <!-- 右侧弹出 -->
    <van-popup v-model:show="open" position="right" closeable close-icon-position="top-left" close-icon="arrow-left"
        teleport="body" :style="{
            width: '100%', height: '100%', background: `rgba(246, 246, 246, 1)`
        }">
        <div class="title" @click="open = false">{{ $t('layout.USDTRecords') }} </div>
        <div class="nav">
            <ul>
                <li v-for="(item, index) in   statusList  " :key="index"
                    :class="{ active: index == setat.status || (!index && setat.status == '') }" @click="sendNav(index)">{{
                        $t('layout.' + item) }}</li>
            </ul>
        </div>
        <div class="list">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('layout.noMore')"
                    @load="onLoad">
                    <div class="row" v-for="(item, index) in list" :key="index">
                        <div class="cell">
                            <div class="label">{{ $t('layout.' + statusList[item.Status]) }}</div>
                            <div class="value" :class="{ on: item.ChangeAmount.indexOf('-') !== -1 }">
                                {{ item.ChangeAmount.indexOf('-') !== -1 ? "" : "+" }}{{ item.ChangeAmount
                                }}
                            </div>
                        </div>
                        <div class="cell">
                            <div class="time">{{ item.CreatedAt }}</div>
                            <div class="bl">{{ $t('layout.balance') }} {{ item.AfterBalance }}</div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </van-popup>
</template>
<style lang="less" scoped>
.van-popup {


    .title {
        padding-left: 45px;
        font-size: 16px;
        line-height: 54px;
    }

    .nav {
        padding: 0 11px;

        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 4px;
                min-width: 80px;
                height: 30px;
                font-size: 12px;
                font-weight: 400;
                color: #1F2120;
                background: #FFFFFF;
                border-radius: 8px;

                &.active {
                    color: #FFFFFF;
                    background: rgba(56, 191, 228, 1);
                }
            }
        }
    }

    .list {
        margin: 11px 15px 15px 15px;
        border-radius: 8px;
        background: #FFFFFF;

        .row {
            padding: 15px;
            border-bottom: 1px solid rgba(136, 136, 136, 0.10);

            .cell {
                font-size: 12px;
                font-weight: 400;
                color: #888888;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .label {
                    font-size: 14px;
                    font-weight: 500;
                    color: #1F2120;
                }

                .value {
                    font-size: 15px;
                    font-weight: bold;
                    color: #38BFE4;

                    &.on {
                        color: rgba(43, 221, 199, 1);
                    }
                }

                &:first-child {
                    margin-bottom: 8px;
                }
            }
        }

    }
}
</style>